<template>
  <div id="page">
    {{num}}
    <div class="move-box" v-move>自定义指令{{num}}</div>
    <div class="move-box" v-move.right="190">右自定义指令{{mix}}</div>
  </div>
</template>

<script>
import _mixin from "@/mixin/directive"
export default {
  name: "pageDirective",
  mixins:[_mixin],
  data() {
    return {
      num: 1,
      // mix:'1112s'//如果数据有和mixin重名的，以组件内为准
    };
  },
  directives: {
    move: {
      bind(el, binding, vnode) {
        console.log("bind");
        console.log(el); //el是DOM结构本身
        console.log(binding); //binding是dom相应属性集合，一个对象，包含以下 property：name-指令名；value：指令的绑定值；modifiers：一个包含修饰符的对象。
        console.log("虚拟DOM:", vnode);
      },
      inserted: function(el, binding) {
        console.log("insert");
        console.log(binding.value)
        var _d = binding.modifiers.left ? "-" : "";
        var startX = 0;
        var _x = 0;
        el.addEventListener(
          "touchstart",
          function(e) {
            _x = startX = e.touches[0].pageX;
          },
          false
        );
        el.addEventListener(
          "touchmove",
          function(e) {
            _x = e.touches[0].pageX;
          },
          false
        );
        el.addEventListener(
          "touchend",
          function() {
            if (startX >= _x) {
              el.style.transform = "translateX(" + "-" + 180 + "px)";
            } else {
              el.style.transform = "translateX(0)";
            }
          },
          false
        );
      },
      update(el, binding) {
        //一般有页面元素发生改变时触发，
        console.log(el.innerHTML);
        if (binding.value != binding.oldValue) {
          console.log("update");
          console.log(el.innerHTML);
          console.log("当前值：", binding.value);
          console.log("旧值：", binding.oldValue);
        }
      },
      componentUpdated(el, binding) {
        //页面结构发生改变时才会触发，页面结构改变发生在数据改变之后//对比nextTIck
        console.log("componentUpdated");
        console.log(el.innerHTML);
        console.log(binding);
      }
    }
  },
  mounted() {
    console.log(this.mix);
    setTimeout(
      function() {
        this.num = 2;
      }.bind(this),
      1000
    );
  }
};
</script>

<style>
#page{overflow: hidden;}
.move-box{
    height: 100px;
    line-height: 100px;
    font-size: 14px;
    text-align: left;
    margin: 10px 0;
    padding:0 10px;
    box-sizing: border-box;
    color:red;
    background: skyblue;
    width: 100%;
    /* transition: all .3s ease; */
    transition: all .5s ease;
}
</style>